let img = document.querySelectorAll('.content-subbox-img img')
//console.log(img);
let img1 = document.querySelector('.content-subbox-img1 img')

let int = document.querySelectorAll('.content-subbox-img input')

let int1 = document.querySelector('.content-subbox-img1 input')

let masa = document.querySelectorAll('.masa')
//点击img时，清空内容
img1.addEventListener('click', function () {
    int1.value = ''
    img1.style.display = 'none'
    //同时隐藏报错注释
    masa1.style.display = 'none'
})

//点击图片的时候图片消失，并且清空内容。

//因为图片定义在三个内容里面所以需要遍历
for (let i = 0; i < img.length; i++) {
    //向上查找父类标签，指定父类标签的第一个孩子
    let tp = img[i].closest('.content-subbox-img').children[1]
    let nr = int[i].closest('.content-subbox-img').children[1]
    //设置点击事件
    img[i].addEventListener('click', function () {
        //隐藏图片
        tp.style.display = 'none'
        //清空input内容
        int[i].value = ''
        masa[i].style.display = 'none'

    })

    int[i].addEventListener('input', function () {
        if (int[i].value.length > 0) {
            tp.style.display = 'block'
        } else {
            tp.style.display = 'none'
        }
    })
}
//console.log(img[1]);



//当input内容大于0时，显示×
int1.addEventListener('input', function () {
    if (int1.value.length > 0) {
        img1.style.display = 'block'
    } else {
        img1.style.display = 'none'
    }
})

// 手机验证码输入违法报错
let masa1 = document.querySelector('.masa1')
int1.addEventListener('blur', function () {
    let yz = /^[a-zA-Z][a-zA-Z0-9_]{3}$/;
    let bool = yz.test(int1.value)
    if (bool) {
        masa1.style.display = 'none'
    } else {
        masa1.style.display = 'block'
    }
})

//用户名输入违法报错
int[0].addEventListener('blur', function () {
    let it1 = /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/
    let bool = it1.test(int[0].value)
    if (bool) {
        masa[0].style.display = 'none'

    } else {
        masa[0].style.display = 'block'
    }
})

//手机号输入违法报错
int[1].addEventListener('blur', function () {
    let it2 = /^1[345678][0-9]{9}$/
    let bool = it2.test(int[1].value)
    if (bool) {
        masa[1].style.display = 'none'

    } else {
        masa[1].style.display = 'block'
    }
})

//密码输入违法报错
int[2].addEventListener('blur', function () {
    let it3 = /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/;
    let bool = it3.test(int[2].value)
    if (bool) {
        masa[2].style.display = 'none'

    } else {
        masa[2].style.display = 'block'
    }
})
//定义正则表达式数组
let arr = [/^[a-zA-Z][a-zA-Z0-9_]{5,11}$/, /^1[345678][0-9]{9}$/,
    /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/]

let btn = document.querySelector('.btn')
//判断input框错误时，不跳转
btn.addEventListener('click', function () {
    for (i = 0; i < int.length; i++) {
        let bool = arr[i].test(int[i].value)
        if (bool) {
            masa[i].style.display = 'none'
            location.href='../page/首页.html'
        }
        masa[i].style.display = 'block'
        return
    }
})

let cheakbox = document.querySelector('.checkbox')
//点击按钮验证input
//保存定义变量
let num = 0
cheakbox.addEventListener('click', function () {
    num++
    //console.log(num);
    if (num % 2 != 0) {
        btn.style.backgroundColor = '#1271ef'
        btn.disabled = false
    } else {
        btn.style.backgroundColor = '#e0e0e0'
        btn.disabled = true
    }
})



